import React, { memo, useEffect, useState } from "react";
import { useSearchParams } from "react-router-dom";
import { Sidebar } from "react-vant";
import { Popup, Stepper,Button } from "antd-mobile";
import { useSelector, useDispatch } from "react-redux";
const Cart = memo(() => {
  const [active, setActive] = useState(0);
  const [search] = useSearchParams();
  const [index, setIndex] = useState(Number(search.get("index")));
  const list = useSelector((state) => state.goods.goodList);
  const [visible, setVisible] = useState(false);
  const [obj, setObj] = useState({});
  const [num,setNum] = useState(1)
  console.log(list);
  useEffect(() => {
    document.querySelector(".right").onscroll = function () {
      let divs = document.querySelectorAll(".right div");
      for (var i = 0; i < divs.length; i++) {
        if (divs[i].getBoundingClientRect().top <= 50) {
          setActive(i);
        }
      }
    };
  }, []);
  function To(v) {
    document.querySelector("#F" + v).scrollIntoView({
      behavior: "instant",
      block: "start",
    });
  }
  return (
    <div className="cart">
      <div className="top_">
        <span
          className={index === 0 ? "see" : ""}
          onClick={() => {
            setIndex(0);
          }}
        >
          到店自取
        </span>
        <span
          className={index === 1 ? "see" : ""}
          onClick={() => {
            setIndex(1);
          }}
        >
          外卖配送
        </span>
      </div>
      <div className="back">
        <div className="left">
          <Sidebar
            value={active}
            onChange={(v) => {
              setActive(v);
              To(v);
            }}
          >
            {list.map((item) => (
              <Sidebar.Item title={item.type} key={item.type} />
            ))}
          </Sidebar>
        </div>
        <div className="right">
          {list.map((item, i) => (
            <div id={"F" + i} key={"F" + i}>
              {item.cars.map((item2) => (
                <p
                  key={item2.TID}
                  onClick={() => {
                    setVisible(true);
                    setObj(item2);
                  }}
                >
                  {item2.name}
                </p>
              ))}
            </div>
          ))}
        </div>
      </div>
      <Popup
        visible={visible}
        onMaskClick={() => {
          setVisible(false);
          setNum(1)
        }}
        bodyStyle={{
          borderTopLeftRadius: "8px",
          borderTopRightRadius: "8px",
          minHeight: "90vh",
        }}
      >
        <p>名称：{obj.name}</p>
        <p>价格：{obj.price}</p>
        <Stepper
          min={1}
          max={99}
          onChange={(v) => {
            setNum(v)
          }}
          value={num}
        />
        <Button block color="primary" size="large" onClick={()=>console.log({...obj,num})}>
           添加到购物车
        </Button>
      </Popup>
    </div>
  );
});

export default Cart;
